<template>
  <div class="task-details-container">
    <!-- 顶部信息卡片 -->
    <div class="task-card">
      <div class="task-header">
        <h2 class="task-title">{{ task.title }}</h2>
        <div class="task-stats">
          <div class="stat-item">
            <i class="fas fa-users"></i>
            <span>学生数量：{{ studentScores.length }}</span>
          </div>
          <div class="stat-item" v-if="taskLeaders && taskLeaders.length > 0">
            <i class="fas fa-user-tie"></i>
            <span>组长数量：{{ taskLeaders.length }}</span>
          </div>
        </div>
      </div>
      
      <div class="action-buttons">
        <button class="btn btn-primary" @click="confirmSelection">
          <i class="fas fa-check"></i> 确认设置组长
        </button>
        <button class="btn btn-secondary" @click="cancelSelection">
          <i class="fas fa-times"></i> 取消设置
        </button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-area">
      <!-- 左侧：组长信息 -->
      <div class="leaders-section">
        <div class="section-card">
          <div class="card-header">
            <h3><i class="fas fa-crown"></i> 当前组长</h3>
            <span class="badge">{{ taskLeaders.length }}</span>
          </div>
          
          <div v-if="taskLeaders && taskLeaders.length > 0" class="leaders-grid">
            <div v-for="leader in taskLeaders" :key="leader.user_id" class="leader-card" @click="showLeaderDetails(leader)">
              <div class="leader-avatar">
                <img :src="getAvatarUrl(leader.username)" alt="头像">
              </div>
              <div class="leader-info">
                <h4>{{ leader.username }}</h4>
                <div class="leader-skills">
                  <div class="skill-bar">
                    <div class="skill-fill" :style="{width: getRandomSkill() + '%'}"></div>
                  </div>
                  <span>能力值: {{ getRandomSkill() }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <div v-else class="empty-state">
            <i class="fas fa-user-slash"></i>
            <p>暂无组长，请从学生列表中选择</p>
          </div>
        </div>
      </div>

      <!-- 右侧：学生列表 -->
      <div class="students-section">
        <div class="section-card">
          <div class="card-header">
            <h3><i class="fas fa-user-graduate"></i> 加入该任务的学生</h3>
            <div class="search-box">
              <input type="text" v-model="searchQuery" placeholder="搜索学生...">
              <i class="fas fa-search"></i>
            </div>
          </div>
          
          <div class="sort-options">
            <button :class="['sort-btn', sortBy === 'score' ? 'active' : '']" @click="setSortBy('score')">
              按得分排序 <i class="fas fa-sort-amount-down"></i>
            </button>
            <button :class="['sort-btn', sortBy === 'name' ? 'active' : '']" @click="setSortBy('name')">
              按姓名排序 <i class="fas fa-sort-alpha-down"></i>
            </button>
          </div>
          
          <ul class="students-list">
            <li v-for="student in filteredStudents" :key="student.username" :class="{ 'leader-selected': student.isLeader }">
              <div class="student-info">
                <div class="student-avatar">
                  <img :src="getAvatarUrl(student.username)" alt="头像">
                  <div v-if="student.isLeader" class="leader-badge">
                    <i class="fas fa-crown"></i>
                  </div>
                </div>
                <div class="student-details">
                  <h4>{{ student.username }}</h4>
                  <div class="score-display">
                    <div class="score-bar">
                      <div class="score-fill" :style="{width: student.score + '%', backgroundColor: getScoreColor(student.score)}"></div>
                    </div>
                    <span class="score-text">得分: {{ student.score }}</span>
                  </div>
                </div>
              </div>
              <div class="student-actions">
                <button v-if="!student.isLeader" class="btn btn-set" @click="setLeader(student)">
                  <i class="fas fa-user-plus"></i> 设为组长
                </button>
                <button v-if="student.isLeader" class="btn btn-cancel" @click="cancelLeader(student)">
                  <i class="fas fa-user-minus"></i> 取消组长
                </button>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 组长详情模态框 -->
    <div v-if="showModal" class="modal-overlay" @click.self="closeModal">
      <div class="modal-content">
        <div class="modal-header">
          <h3>组长详情分析</h3>
          <button class="close-btn" @click="closeModal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        
        <div class="modal-body">
          <div class="leader-profile">
            <div class="profile-header">
              <div class="large-avatar">
                <img :src="getAvatarUrl(selectedLeader.username)" alt="头像">
              </div>
              <div class="profile-info">
                <h2>{{ selectedLeader.username }}</h2>
                <p class="leader-title">任务组长</p>
                <div class="leader-stats">
                  <div class="stat">
                    <span class="stat-value">{{ getRandomInt(10, 30) }}</span>
                    <span class="stat-label">任务完成</span>
                  </div>
                  <div class="stat">
                    <span class="stat-value">{{ getRandomInt(5, 15) }}</span>
                    <span class="stat-label">团队带领</span>
                  </div>
                  <div class="stat">
                    <span class="stat-value">{{ getRandomInt(80, 100) }}%</span>
                    <span class="stat-label">好评率</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="charts-container">
              <div class="chart-card">
                <h4>能力雷达图</h4>
                <div class="chart-placeholder" ref="radarChart">
                  <!-- 雷达图将在mounted中渲染 -->
                </div>
              </div>
              
              <div class="chart-card">
                <h4>历史表现</h4>
                <div class="chart-placeholder" ref="performanceChart">
                  <!-- 折线图将在mounted中渲染 -->
                </div>
              </div>
            </div>
            
            <div class="skills-section">
              <h4>核心能力</h4>
              <div class="skills-grid">
                <div class="skill-item" v-for="(skill, index) in leaderSkills" :key="index">
                  <div class="skill-header">
                    <span class="skill-name">{{ skill.name }}</span>
                    <span class="skill-value">{{ skill.value }}%</span>
                  </div>
                  <div class="skill-progress">
                    <div class="skill-progress-bar" :style="{width: skill.value + '%', backgroundColor: getSkillColor(skill.value)}"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from '@/axiosInstance';
import * as echarts from 'echarts';

export default {
  name: 'TaskDetails',
  data() {
    return {
      task: {
        id: null,
        title: '',
      },
      studentScores: [],
      taskLeaders: [], // 用于存储后端返回的当前组长列表
      searchQuery: '',
      sortBy: 'score', // 默认按分数排序
      showModal: false,
      selectedLeader: null,
      leaderSkills: [
        { name: '团队协作', value: 85 },
        { name: '任务管理', value: 90 },
        { name: '沟通能力', value: 88 },
        { name: '问题解决', value: 92 },
        { name: '技术能力', value: 87 },
        { name: '创新思维', value: 83 }
      ]
    }
  },
  mounted() {
    // 加载字体图标
    this.loadFontAwesome();
  },
  computed: {
    filteredStudents() {
      let students = [...this.studentScores];
      
      // 搜索过滤
      if (this.searchQuery) {
        students = students.filter(student => 
          student.username.toLowerCase().includes(this.searchQuery.toLowerCase())
        );
      }
      
      // 排序
      if (this.sortBy === 'score') {
        students.sort((a, b) => b.score - a.score);
      } else if (this.sortBy === 'name') {
        students.sort((a, b) => a.username.localeCompare(b.username));
      }
      
      return students;
    }
  },
  methods: {
    showLeaderDetails(leader) {
      this.selectedLeader = leader;
      this.showModal = true;
      this.$nextTick(() => {
        // 确保DOM已更新后再初始化图表
        setTimeout(() => {
          this.initRadarChart();
          this.initPerformanceChart();
        }, 100);
      });
    },
    closeModal() {
      this.showModal = false;
      this.selectedLeader = null;
    },
    getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    getSkillColor(value) {
      if (value >= 90) return '#28a745';
      if (value >= 80) return '#17a2b8';
      if (value >= 70) return '#ffc107';
      return '#dc3545';
    },
    initRadarChart() {
      if (!this.$refs.radarChart) return;
      
      // 销毁之前的实例，避免重复创建
      const existingChart = echarts.getInstanceByDom(this.$refs.radarChart);
      if (existingChart) {
        existingChart.dispose();
      }
      
      const chart = echarts.init(this.$refs.radarChart);
      const option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'item'
        },
        radar: {
          indicator: this.leaderSkills.map(skill => ({
            name: skill.name,
            max: 100
          })),
          radius: '65%',
          splitNumber: 5,
          axisName: {
            color: '#333',
            fontSize: 12,
            fontWeight: 'bold'
          },
          splitArea: {
            areaStyle: {
              color: ['#f8f9fa', '#f0f2f5']
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#ddd'
            }
          }
        },
        series: [{
          type: 'radar',
          data: [{
            value: this.leaderSkills.map(skill => skill.value),
            name: '能力分布',
            areaStyle: {
              color: 'rgba(65,105,225,0.3)'
            },
            lineStyle: {
              color: '#4169e1',
              width: 2
            },
            itemStyle: {
              color: '#4169e1'
            }
          }]
        }]
      };
      chart.setOption(option);
      
      // 添加窗口大小变化时重绘图表
      window.addEventListener('resize', () => {
        chart.resize();
      });
    },
    initPerformanceChart() {
      if (!this.$refs.performanceChart) return;
      
      // 销毁之前的实例，避免重复创建
      const existingChart = echarts.getInstanceByDom(this.$refs.performanceChart);
      if (existingChart) {
        existingChart.dispose();
      }
      
      const chart = echarts.init(this.$refs.performanceChart);
      const months = ['1月', '2月', '3月', '4月', '5月', '6月'];
      const option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: months,
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            color: '#333'
          }
        },
        yAxis: {
          type: 'value',
          max: 100,
          axisLine: {
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            color: '#333'
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [{
          data: months.map(() => this.getRandomInt(75, 95)),
          type: 'line',
          smooth: true,
          lineStyle: {
            color: '#4169e1',
            width: 3
          },
          itemStyle: {
            color: '#4169e1'
          },
          areaStyle: {
            color: 'rgba(65,105,225,0.3)'
          }
        }]
      };
      chart.setOption(option);
      
      // 添加窗口大小变化时重绘图表
      window.addEventListener('resize', () => {
        chart.resize();
      });
    },
    loadFontAwesome() {
      // 动态加载Font Awesome
      if (!document.getElementById('font-awesome-css')) {
        const link = document.createElement('link');
        link.id = 'font-awesome-css';
        link.rel = 'stylesheet';
        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';
        document.head.appendChild(link);
      }
    },
    async fetchTaskStudents(taskId) {
      try {
        const response = await axios.get(`http://39.105.217.183:8000/tasks/${taskId}/students/`);
        if (response.data.status === 'success') {
          this.studentScores = response.data.data.map(username => ({
            username,
            score: Math.floor(Math.random() * 101),
            isLeader: false
          }));
          this.updateStudentLeaderStatus();
        } else {
          alert('获取学生列表失败：' + response.data.message);
        }
      } catch (error) {
        console.error('获取学生列表失败:', error.message || error);
        alert('获取学生列表失败，请稍后重试');
      }
    },
    async fetchTaskLeaders(taskId) {
      try {
        const response = await axios.get(`http://39.105.217.183:8000/tasks/${taskId}/leaders/`);
        if (response.data.status === 'success') {
          this.taskLeaders = response.data.data;
          // 更新学生列表中的组长状态
          this.updateStudentLeaderStatus();
        } else {
          alert('获取组长信息失败：' + response.data.message);
        }
      } catch (error) {
        console.error('获取组长信息失败:', error.message || error);
        alert('获取组长信息失败，请稍后重试');
      }
    },
    updateStudentLeaderStatus() {
      // 根据taskLeaders更新studentScores中的isLeader状态
      const leaderUsernames = this.taskLeaders.map(leader => leader.username);
      this.studentScores.forEach(student => {
        student.isLeader = leaderUsernames.includes(student.username);
      });
    },
    setLeader(student) {
      student.isLeader = true;
    },
    cancelLeader(student) {
      student.isLeader = false;
    },
    cancelSelection() {
      this.studentScores.forEach(student => {
        student.isLeader = false;
      });
    },
    async confirmSelection() {
      const leaders = this.studentScores.filter(student => student.isLeader).map(student => student.username);
      try {
        const response = await axios.post(`http://39.105.217.183:8000/tasks/${this.task.id}/set-leaders/`, { leaders });
        if (response.data.status === 'success') {
          alert('组长设置成功');
          // 重新获取当前组长列表，刷新显示
          this.fetchTaskLeaders(this.task.id);
        } else {
          alert('组长设置失败：' + response.data.message);
        }
      } catch (error) {
        console.error('组长设置失败:', error.message || error);
        alert('组长设置失败，请稍后重试');
      }
    },
    setSortBy(type) {
      this.sortBy = type;
    },
    getAvatarUrl(username) {
      // 根据用户名生成一个随机的头像URL
      return `https://ui-avatars.com/api/?name=${encodeURIComponent(username)}&background=random&color=fff`;
    },
    getRandomSkill() {
      return Math.floor(Math.random() * 21) + 80; // 返回80-100之间的随机数
    },
    getScoreColor(score) {
      if (score >= 90) return '#28a745';
      if (score >= 80) return '#17a2b8';
      if (score >= 70) return '#ffc107';
      return '#dc3545';
    }
  },
  created() {
    const taskId = this.$route.query.taskId;
    const taskName = this.$route.query.taskName;
    this.task.id = taskId;
    this.task.title = taskName;
    this.fetchTaskStudents(taskId);
    this.fetchTaskLeaders(taskId); // 获取当前组长
  },
  
    loadFontAwesome() {
      // 动态加载Font Awesome
      if (!document.getElementById('font-awesome-css')) {
        const link = document.createElement('link');
        link.id = 'font-awesome-css';
        link.rel = 'stylesheet';
        link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';
        document.head.appendChild(link);
      }
    },
    async fetchTaskStudents(taskId) {
      try {
        const response = await axios.get(`http://39.105.217.183:8000/tasks/${taskId}/students/`);
        if (response.data.status === 'success') {
          this.studentScores = response.data.data.map(username => ({
            username,
            score: Math.floor(Math.random() * 101),
            isLeader: false
          }));
          this.updateStudentLeaderStatus();
        } else {
          alert('获取学生列表失败：' + response.data.message);
        }
      } catch (error) {
        console.error('获取学生列表失败:', error.message || error);
        alert('获取学生列表失败，请稍后重试');
      }
    },
    async fetchTaskLeaders(taskId) {
      try {
        const response = await axios.get(`http://39.105.217.183:8000/tasks/${taskId}/leaders/`);
        if (response.data.status === 'success') {
          this.taskLeaders = response.data.data;
          // 更新学生列表中的组长状态
          this.updateStudentLeaderStatus();
        } else {
          alert('获取组长信息失败：' + response.data.message);
        }
      } catch (error) {
        console.error('获取组长信息失败:', error.message || error);
        alert('获取组长信息失败，请稍后重试');
      }
    },
    updateStudentLeaderStatus() {
      // 根据taskLeaders更新studentScores中的isLeader状态
      const leaderUsernames = this.taskLeaders.map(leader => leader.username);
      this.studentScores.forEach(student => {
        student.isLeader = leaderUsernames.includes(student.username);
      });
    },
    setLeader(student) {
      student.isLeader = true;
    },
    cancelLeader(student) {
      student.isLeader = false;
    },
    cancelSelection() {
      this.studentScores.forEach(student => {
        student.isLeader = false;
      });
    },
    async confirmSelection() {
      const leaders = this.studentScores.filter(student => student.isLeader).map(student => student.username);
      try {
        const response = await axios.post(`http://39.105.217.183:8000/tasks/${this.task.id}/set-leaders/`, { leaders });
        if (response.data.status === 'success') {
          alert('组长设置成功');
          // 重新获取当前组长列表，刷新显示
          this.fetchTaskLeaders(this.task.id);
        } else {
          alert('组长设置失败：' + response.data.message);
        }
      } catch (error) {
        console.error('组长设置失败:', error.message || error);
        alert('组长设置失败，请稍后重试');
      }
    },
    setSortBy(type) {
      this.sortBy = type;
    },
    getAvatarUrl(username) {
      // 根据用户名生成一个随机的头像URL
      return `https://ui-avatars.com/api/?name=${encodeURIComponent(username)}&background=random&color=fff`;
    },
    getRandomSkill() {
      return Math.floor(Math.random() * 21) + 80; // 返回80-100之间的随机数
    },
    getScoreColor(score) {
      if (score >= 90) return '#28a745';
      if (score >= 80) return '#17a2b8';
      if (score >= 70) return '#ffc107';
      return '#dc3545';
    }
  }

</script>

<style scoped>
.task-details-container {
  padding: 24px;
  background: #f8f9fa;
  min-height: 100vh;
}

.task-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.task-title {
  font-size: 24px;
  color: #2c3e50;
  margin: 0;
}

.task-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.content-area {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
}

.section-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.leaders-grid {
  display: grid;
  gap: 16px;
}

.leader-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f0f2f5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

.leader-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.leader-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
}

.leader-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader-info {
  flex: 1;
}

.leader-info h4 {
  margin: 0 0 8px 0;
  color: #2c3e50;
  font-weight: 600;
}

.leader-skills {
  display: flex;
  align-items: center;
  gap: 12px;
}

.skill-bar {
  flex: 1;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #dee2e6;
}

.skill-fill {
  height: 100%;
  background: #4169e1;
  transition: width 0.3s ease;
}

.leader-skills span {
  color: #333;
  font-weight: 600;
  min-width: 80px;
}

.students-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.students-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s ease;
}

.students-list li:hover {
  background: #f8f9fa;
}

.student-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.student-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
}

.student-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: #ffd700;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

.student-details {
  flex: 1;
}

.student-details h4 {
  margin: 0 0 4px 0;
  color: #2c3e50;
}

.score-display {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500; /* 加粗字体 */
}

.score-bar {
  flex: 1;
  height: 8px; /* 增加高度 */
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #dee2e6; /* 添加边框 */
}

.score-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.score-text {
  color: #000; /* 改为黑色文本，提高对比度 */
  font-weight: 600; /* 加粗字体 */
  margin-left: 5px; /* 增加左侧间距 */
  min-width: 70px; /* 确保文本有足够空间 */
}

.student-actions {
  display: flex;
  gap: 20px; /* 增加按钮之间的间距 */
}

.btn {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 110px; /* 确保按钮有足够宽度 */
  justify-content: center; /* 内容居中 */
}

.btn:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

.btn-set {
  background: #28a745; /* 绿色 */
  color: white;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2); /* 添加阴影效果 */
  font-weight: 500; /* 加粗字体 */
}

.btn-cancel {
  background: #dc3545; /* 红色 */
  color: white;
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2); /* 添加阴影效果 */
  font-weight: 500; /* 加粗字体 */
}

.btn-primary {
  background: #4169e1;
  color: white;
  box-shadow: 0 2px 4px rgba(65, 105, 225, 0.2);
}

.btn-secondary {
  background: #6c757d;
  color: white;
  box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
}

.search-box {
  position: relative;
  width: 250px;
}

.search-box input {
  width: 100%;
  padding: 8px 12px;
  padding-left: 32px;
  border: 1px solid #ddd;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.search-box input:focus {
  outline: none;
  border-color: #4169e1;
  box-shadow: 0 0 0 2px rgba(65,105,225,0.2);
}

.search-box i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.sort-options {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.sort-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sort-btn:hover {
  border-color: #4169e1;
  color: #4169e1;
}

.sort-btn.active {
  background: #4169e1;
  color: white;
  border-color: #4169e1;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.5rem;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

.modal-body {
  padding: 20px;
}

.leader-profile {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile-header {
  display: flex;
  gap: 24px;
  align-items: center;
}

.large-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #4169e1;
}

.large-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info {
  flex: 1;
}

.profile-info h2 {
  margin: 0 0 8px 0;
  color: #2c3e50;
}

.leader-title {
  color: #4169e1;
  font-weight: 500;
  margin: 0 0 16px 0;
}

.leader-stats {
  display: flex;
  gap: 24px;
}

.stat {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c3e50;
}

.stat-label {
  display: block;
  color: #666;
  font-size: 0.9rem;
}

.charts-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.chart-card {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e0e0e0;
}

.chart-card h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  text-align: center;
}

.chart-placeholder {
  height: 300px;
  width: 100%;
}

.skills-section {
  margin-top: 24px;
}

.skills-section h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.skill-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e0e0e0;
}

.skill-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.skill-name {
  color: #333;
  font-weight: 500;
}

.skill-value {
  color: #333;
  font-weight: 600;
}

.skill-progress {
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #dee2e6;
}

.skill-progress-bar {
  height: 100%;
  transition: width 0.3s ease;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #666;
  text-align: center;
}

.empty-state i {
  font-size: 3rem;
  margin-bottom: 16px;
  color: #ddd;
}

.badge {
  background: #4169e1;
  color: white;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.9rem;
  font-weight: 500;
}

.leader-selected {
  background-color: rgba(65, 105, 225, 0.1);
  border-left: 3px solid #000;
}
</style>